<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图表</title>
    <script type="text/javascript" src="../echartsjs/echarts.min.js"></script>
    <script type="text/javascript" src="../jquery-easyui-1.6.7/jquery.min.js"></script>

    <style type="text/css">

        .main-d {
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 5px;
            right: 5px;
            /*border: 1px solid darkorchid;*/

        }
        .electricDescribeYear {
           width: 100%;
            height: 45%;
            margin: 0 auto;
            z-index: 99;
            top: 0px;
            border: 2px solid #333333;
        }
        #container {
            width: 100%;
            height: 45%;
            margin: 0 auto;
            z-index: 99;
            top: 10px;
            border: 2px solid #333333;
        }
        .bottom {
            width: 100%;
            height: 10%;

            border: 2px solid #333333;
        }

        .text1,.text2 {
            width: 300px;
            height: 50%;
            font-size: 20px;
        }

    </style>

</head>
<body style="height: 100%; margin: 0">

<div class="main-d">

<!--获取全局数据-->
<script type="text/javascript">

var HistogramX = [];
var HistogramY = [];
var LineX=[];
var LineY=[];

var parameter = getRequest();
var name = parameter['ybname'];//参数名
var millName = parameter['millname'];//参数名

console.log(name);

//获取柱状图数据
function Histogram(){
    HistogramX = [];
    HistogramY = [];
    $.ajax({
        /*  url:"../jquery-easyui-1.6.7/demo/accordion/datagrid_data1.json",*/
        url: 'https://www.xdfznh.club/wxpadbe/flux/getYBConsumption'
            + '/'
            + getUrlParam("SDate")
            + '/'
            + getUrlParam("EDate")
            + '/' + millName,

        type: 'get',
        dataType: 'json',
        success: function (data) {
            var parameter = getRequest();
            var name = parameter['ybname'];//参数名

            var dataNew=data.filter(item=>item.b_YBType===name);

            for (let i = 0; i < dataNew.length; i++) {
                HistogramX.push(dataNew[i]["b_YBName"]);
                HistogramY.push(dataNew[i]["b_LLAll"]);
            }
            //console.log("函数内层赋值之后的结果")
            //console.log(data1);
            getZZ();
        }
    })
    //return data1;
};

//获取折线图数据
function GetLine(){
    LineX = [];
    LineY = [];
    $.ajax({
        /*  url:"../jquery-easyui-1.6.7/demo/accordion/datagrid_data1.json",*/
        url: 'https://www.xdfznh.club/wxpadbe/flux/getYBtotal'
            + '/'
            + getUrlParam("SDate").slice(0,10)
            + '/'
            + getUrlParam("EDate").slice(0,10)
            + '/' + millName,

        type: "GET",
        datatype: "json",
        success: function (data) {
            var parameter = getRequest();
            var name = parameter['ybname'];//参数名

            var dataNew=data.filter(item=>item.b_YBType===name);

            for (let i = 0; i < dataNew.length; i++) {
                LineX.push(dataNew[i]["b_date"]);
                LineY.push(dataNew[i]["b_LLAll"]);
            }
            //console.log("函数内层赋值之后的结果")
            console.log(LineX);
            getZX();

            //console.log(data.filter(item=>item.addr==='09'))
        }
    })
    //return data1;
};



console.log("外层调用函数时传出的结果")
console.log(Histogram());
console.log(GetLine());
console.log(getUrlParam("SDate"));
console.log(getUrlParam("EDate"));



    //获取浏览器地址参数
function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
}

//获取浏览器地址参数（参数为中文）
function getRequest() {
    var url = window.location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            //就是这句的问题
            theRequest[strs[i].split("=")[0]]=decodeURI(strs[i].split("=")[1]);
            //之前用了unescape()
            //才会出现乱码
        }
    }
    return theRequest;
}




</script>


<!--柱状图-->
<div id="barDouble" class="electricDescribeYear"></div>

<script type="text/javascript">
function getZZ() {
    setTimeout(function () {
        setBarDoubleChart('barDouble');

        // 柱状图 双 --- 总用电量分布(年)
        function setBarDoubleChart(data) {
            var myBarDoubleChart = echarts.init(document.getElementById('barDouble'));
            var xAxisData = ['1月月月月月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月', '13月', '14月', '15月', '16月', '17月', '18月', '19月'];
            var endPercent = (6 / xAxisData.length) * 100;
            var app = {};

            //设置柱状图中的字体显示
            app.config = {
                rotate: 0, /*柱子上字体显示旋转度数*/
                align: 'center', /*字体显示位置*/
                verticalAlign: 'middle',
                position: 'insideBottom',
                distance: 10, /*字体显示距离顶端的高度*/
                onChange: function () {
                    var labelOption = {
                        normal: {
                            rotate: app.config.rotate,
                            align: app.config.align,
                            verticalAlign: app.config.verticalAlign,
                            position: app.config.position,
                            distance: app.config.distance
                        }
                    };
                    myChart.setOption({
                        series: [{
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }, {
                            label: labelOption
                        }]
                    });
                }
            };

            var labelOption = {
                normal: {
                    show: true,
                    /*    position: app.config.position,   */
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c}  {name|{a}}',
                    fontSize: 26,
                    rich: {
                        name: {
                            textBorderColor: '#fff'
                        }
                    }
                }
            };

            // 指定图表的配置项和数据
            option1 = {
                title: {
                    text: '分量柱状图'
                },

                //给x轴设置滚动条
                dataZoom: [
                    {
                        start: 0,//默认为0
                        end: endPercent,
                        type: 'slider',
                        show: false,
                        xAxisIndex: [0],
                        handleSize: 10,//滑动条的 左右2个滑动条的大小
                        height: 20,//组件高度
                        left: 50, //左边的距离
                        right: 50,//右边的距离
                        bottom: 10,//右边的距离
                        handleColor: '#ddd',//h滑动图标的颜色
                        handleStyle: {
                            borderColor: "#cacaca",
                            borderWidth: "1",
                            shadowBlur: 2,
                            background: "#ddd",
                            shadowColor: "#ddd",
                        },
                        fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                            //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                            //给第一个设置0，第四个设置1，就是垂直渐变
                            offset: 0,
                            color: '#1eb5e5'
                        }, {
                            offset: 1,
                            color: '#5ccbb1'
                        }]),
                        backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                        showDataShadow: false,//是否显示数据阴影 默认auto
                        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                        handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                        filterMode: 'filter'
                    },
                    //下面这个属性是里面拖到
                    {
                        type: 'inside',
                        show: true,
                        xAxisIndex: [0],
                        start: 0,//默认为1
                        end: 50
                    },
                ],

                // 设置图形的位置
                grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true
                },

                calculable: true,
                xAxis: {
                    type: 'category',
                    data: HistogramX,
                    //['一号定型机','2号烫光机','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月','13月','14月','15月','16月','17月'],
                    axisLabel: {
                        interval: 0,
                        fontSize: 23,
                        /* rotate:-70,//-30度角倾斜显示*/
                        formatter: function (value) {
                            var ret = "";//拼接加\n返回的类目项
                            var maxLength = 2;//每项显示文字个数
                            var valLength = value.length;//X轴类目项的文字个数
                            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                            if (rowN > 1)//如果类目项的文字大于3,
                            {
                                for (var i = 0; i < rowN; i++) {
                                    var temp = "";//每次截取的字符串
                                    var start = i * maxLength;//开始截取的位置
                                    var end = start + maxLength;//结束截取的位置
                                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                    temp = value.substring(start, end) + "\n";
                                    ret += temp; //凭借最终的字符串
                                }
                                return ret;
                            }
                            else {
                                return value;
                            }
                        }
                    }
                },
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            interval: 0,
                            fontSize: 23,
                        }
                    },

                ],
                series: [
                    {
                        name: '',
                        type: 'bar',
                        barGap: 1,
                        label: labelOption,
                        barWidth: 70,
                        itemStyle: {
                            normal: {
                                color: '#37A2DA', /*柱子颜色*/
                                label: {
                                    textStyle: {color: '#333'}, /*柱子上字体的颜色*/
                                    position: 'top'
                                }
                                /*
                            //下面方法是为每个柱状设置不同的颜色
                            color:function(params) {
                                let colorList = ["#37A2DA"];
                                return colorList[params.dataIndex];
                            }
                            */
                            }
                        },
                        data: HistogramY,
                        //[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3, 4.9, 7.0, 23.2, 25.6, 76.7],

                    },

                ]
            };


            // 使用刚指定的配置项和数据显示柱状图图表。
            myBarDoubleChart.setOption(option1);
        }
    }, 100)
}
</script>

<!--折线图-->
<div id="container" ></div>
<script type="text/javascript">
function getZX() {

    setTimeout(function () {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

        option = {
            title: {
                text: '总量折线图'

            },
            tooltip: {
                trigger: 'axis'
            },

            grid: {
                left: '1%',
                right: '3%',
                bottom: '10%',
                top: '15%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            //给x轴设置滚动条
            dataZoom: [
                {
                    start: 0,//默认为0
                    end: 80,
                    type: 'slider',
                    show: false,
                    xAxisIndex: [0],
                    handleSize: 10,//滑动条的 左右2个滑动条的大小
                    height: 20,//组件高度
                    left: 50, //左边的距离
                    right: 50,//右边的距离
                    bottom: 10,//右边的距离
                    handleColor: '#ddd',//h滑动图标的颜色
                    handleStyle: {
                        borderColor: "#cacaca",
                        borderWidth: "1",
                        shadowBlur: 2,
                        background: "#ddd",
                        shadowColor: "#ddd",
                    },
                    fillerColor: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                        //给颜色设置渐变色 前面4个参数，给第一个设置1，第四个设置0 ，就是水平渐变
                        //给第一个设置0，第四个设置1，就是垂直渐变
                        offset: 0,
                        color: '#1eb5e5'
                    }, {
                        offset: 1,
                        color: '#5ccbb1'
                    }]),
                    backgroundColor: '#ddd',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                    handleIcon: 'M-292,322.2c-3.2,0-6.4-0.6-9.3-1.9c-2.9-1.2-5.4-2.9-7.6-5.1s-3.9-4.8-5.1-7.6c-1.3-3-1.9-6.1-1.9-9.3c0-3.2,0.6-6.4,1.9-9.3c1.2-2.9,2.9-5.4,5.1-7.6s4.8-3.9,7.6-5.1c3-1.3,6.1-1.9,9.3-1.9c3.2,0,6.4,0.6,9.3,1.9c2.9,1.2,5.4,2.9,7.6,5.1s3.9,4.8,5.1,7.6c1.3,3,1.9,6.1,1.9,9.3c0,3.2-0.6,6.4-1.9,9.3c-1.2,2.9-2.9,5.4-5.1,7.6s-4.8,3.9-7.6,5.1C-285.6,321.5-288.8,322.2-292,322.2z',
                    filterMode: 'filter'
                },
                //下面这个属性是里面拖到
                {
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,//默认为1
                    end: 50
                },
            ],

            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    interval: 0,
                    fontSize: 23,
                    rotate: 60,//-30度角倾斜显示
                },
                data: LineX,
                //['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0,
                    fontSize: 23,
                }
            },

            series: [
                {
                    name: '',
                    type: 'line',
                    stack: '总量',
                    smooth: true,
                    symbolSize: 20,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                fontSize: 28,
                                textStyle: {color: '#333'},
                            }, //显示折线上的值
                            color: '#37A2DA',
                            //color: '#8cd5c2', //改变折线点的颜色
                            //lineStyle: {
                            // color: '#8cd5c2' //改变折线颜色
                            //}
                            lineStyle: {width: 10}  /*线体的粗细*/
                        }
                    },
                    data: LineY,
                    //[820, 932, 901, 934, 1290, 1330, 1320,0,0,0,0,0,0,988]
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }

    }, 100)
}

</script>

    <!--
<div class="bottom">
    <input class="text1" type="text" title="2019-11-01 07:00:00">
    <input class="text2" type="text">

</div>
-->
</div>

</body>
</html>


